<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom联系</title>
    <script>
        window.onload=function(){
            // 创建一个"广州"节点，添加到#city下
            myClick("btn01",function(){
                        
            /*
                document.getElement
                可用于创造一个元素节点对象
                它需要一个标签名作为参数,将会根据标签名创建元素节点对象
                并将创建好的元素对象返回
            */
              var li= document.createElement("li")
             /*
                document.createTextNode
                可用于创造一个文本节点对象
                它需要一个文本内容作为参数,将会根据改内容创建文本节点,
                并且将新的节点返回
            */

              var gzText=document.createTextNode("广州")

            /* 
                现在需要将文本节点设置为li节点的子节点
                使用appendChild()
                    -向一个父节点中添加一个新的子节点
                    -用法：父节点.appenChild(子节点)
            */
            li.appendChild(gzText)

            /*  
                将li节点添加到id为city的节点下
            */
            var city=document.getElementById("city")
            city.appendChild(li)

        
            })
            // 将"广州"节点插入到#bj前面

            myClick("btn02",function(){
                var city=document.getElementById("city")
                var li=document.createElement("li")
                var gzText=document.createTextNode("广州")
                var beijing=document.getElementById("bj")
                li.appendChild(gzText)

                /* 
                    insertBefore：父节点.insertBefore(放在前面的节点，参考节点)
                 */
                city.insertBefore(li,beijing)
            })
            // 使用"广州"节点替换#bj节点
            myClick("btn03",function(){
                var li=document.createElement("li")
                var gzText=document.createTextNode("广州")
                li.appendChild(gzText)
                var city=document.getElementById("city")
                var bj=document.getElementById("bj")
                /* replaceChild
                    父节点.replaceChild(新节点，旧节点) */
                city.replaceChild(li,bj)

            })


            // 删除#bj节点
            myClick("btn04",function(){
                var city=document.getElementById("city")

                var bj=document.getElementById("bj");
                /* removeChild：(需要父亲节点->属于他杀)
                        -父节点.removeChild(要删除的节点) */
                city.removeChild(bj)


                /*  有时候可能不知道要删除的节点的父亲节点是谁，此时我们需要：
                        -parentNode  
                    (不需要父亲节点->属于自杀)
                */
                bj.parentNode.removeChild(bj)




            })
            // 读取#city内的HTML代码
            myClick("btn05",function(){

            })

        }
        function myClick(idStr,fun){
            var btn=document.getElementById(idStr)
            btn.onclick=fun;
        }
    </script>
</head>
<body>

    <div id="total">
        <div class="inner">
            <p>
                你喜欢那个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>

            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点，添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>

    </div>
    
</body>
</html>